<template>
  <div id="add">
    <div class="bgc">
      <!-- 搜索部分 -->
      <Searhch @onSearch="onSearch" />

      <!-- 表格部分 -->
      <div class="table">
        <el-button type="success" class="but" @click="addhouse">新增仓库</el-button>

        <!-- 表格 -->
        <div style="margin-top: 20px">
          <el-table
            v-loading="loading"
            :data="tableData"
            border
            stripe
            style="width: 100%"
            height="318px"
            :row-class-name="tableRowClassName"
            :header-cell-style="{
              background: '#fff6e2',
            }"
          >
            <el-table-column
              fixed
              prop="date"
              align="center"
              label="序号"
              width="50"
              type="index"
            />
            <el-table-column
              width="100"
              align="center"
              prop="code"
              label="仓库编码"
            />
            <el-table-column
              align="center"
              prop="name"
              label="仓库名称"
              width="100"
            />
            <el-table-column align="center" label="仓库类型" width="100">
              <template #default="scope">
                {{ type[scope.row.type] }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="location"
              label="省/市/区"
              width="160"
            />
            <el-table-column
              align="center"
              prop="address"
              label="详细地址"
              width="200"
            />
            <el-table-column align="center" label="仓库状态" width="120">
              <template #default="scope">
                {{ status[scope.row.status] }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="surface"
              label="仓库面积m²"
              width="120"
            />
            <el-table-column
              align="center"
              prop="includedNum"
              label="库区数量"
              width="90"
            />
            <el-table-column
              align="center"
              prop="personName"
              label="负责人"
              width="120"
            />
            <el-table-column
              align="center"
              prop="phone"
              label="联系电话"
              width="120"
            />
            <el-table-column
              align="center"
              prop="updateTime"
              label="更新时间"
              width="140"
            />
            <el-table-column
              align="center"
              fixed="right"
              label="操作"
              width="160"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="handleClick(scope.row)"
                >编辑</el-button>
                <el-button type="text" size="small" @click="stopFn(scope.row)">{{ statuses[scope.row.status] }}</el-button>
                <el-button type="text" size="small" @click="delFn(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 弹窗 -->
        <Dialog :visible="visible" :vals="vals" @close="visible=false" @update="fearchImformationList()" />

        <!-- 分页 -->
        <Page v-if="flag" :data="data" @update="updateFn" />
      </div>
    </div>
  </div>
</template>

<script>
import { getImformationList, delWarehouse } from '@/api'
import Searhch from '@/components/Search'
import Page from '@/components/Paging'
import Dialog from './components/dialog'
import { Message } from 'element-ui'
export default {
  name: 'Imformation',
  components: {
    Searhch,
    Page,
    Dialog
  },
  data() {
    return {
      // 搜索传入的数值
      pageOption: {
        current: 1,
        size: 10
      },
      flag: false,
      visible: false,
      loading: false,
      vals: {},
      data: {},
      // 仓库类型枚举
      type: {
        ZZ: '中转仓',
        JG: '加工仓',
        CB: '储备仓',
        LC: '冷藏仓'
      },
      // 仓库状态枚举
      status: {
        1: '启用',
        0: '停用'
      },
      // 相反状态枚举
      statuses: {
        0: '启用',
        1: '停用'
      },
      currentPage: 3,
      tableData: []
    }
  },
  created() {
    this.fearchImformationList()
  },
  methods: {
    // 封装列表数据
    // 调用接口、请求数据
    // 将数据传给子组件
    // 由于父子传值为同步、数据请求、dom更新为异步
    // 数据未请求父组件已经向子组件传值
    // 所以要将父子传值变成异步的
    // 所以我们定义一个flag，
    // 初始值为false，数据请求成功改为true
    // 使用v-if“flag”来控制子组件的显示已隐藏
    // 当“flag”为true的时候证明数据请求成功
    // 显示子组件
    // data是分页器组件
    async fearchImformationList(val) {
      this.loading = true
      const { data } = await getImformationList({
        ...val,
        ...this.pageOption
      })
      this.tableData = data.records
      this.data = data
      this.loading = false
      this.flag = true
    },

    // 点击搜索
    // 通过子组件的值进行搜索
    onSearch(val) {
      this.fearchImformationList(val)
    },

    // 点击新增仓库
    // 跳转到新增仓库页面
    addhouse() {
      this.$router.push({ name: 'addhouse', params: { id: 'null' }})
    },

    // 点击编辑
    // 跳转编辑页面
    // 传入id值
    // 通过id请求接口，实现数据回显
    handleClick(row) {
      console.log(row)
      this.$router.push({ name: 'addhouse', params: { id: row.id }})
    },

    // 停用按钮
    stopFn(val) {
      this.visible = true
      this.vals = val
    },

    // 删除事件
    // 点击删除
    // 二次询问是否要删除
    // 传入当前行的id
    // 删除成功、提示用户
    // 更新页面
    async delFn(id) {
      console.log(id)
      this.$confirm('此操作将会删除仓库, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delWarehouse(id)
        this.fearchImformationList()
        Message.success('删除成功')
      }).catch(() => {
      })
    },

    // 分页器子组件页码改变
    // 通知父组件重新调用接口
    // 更新改变页面的数据
    updateFn(val) {
      this.pageOption.current = val
      this.fearchImformationList()
    },

    // 表格隔行变色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 0) {
        return 'success-row' // 这是类名
      } else {
        return ''
      }
    }
  }
}
</script>
<style>
/* 表格高度 */
.el-table td {
  padding: 5px 0 0 0;
}
.el-table th {
  padding: 8px 0 5px;
}
.el-input .el-input__inner {
  height: 35px;
  line-height: 40px;
  background: #f8f5f5;
  border-radius: 6px;
}
/* 关于element-ui 中 table 鼠标悬停时高亮背景颜色的修改 */
.el-table tbody tr:hover>td { background-color: #fff6e2 }

/* 隔行变色 */
.success-row {
 background-color:#fdfcf9 !important;
}
</style>

<style lang="scss" scoped>
.bgc {
  overflow: hidden;
  background-color: #f1ecec;
  padding: 0px 20px 20px;
}
// 表格
.table {
  padding: 20px 0;
  background-color: #fff;
  border-radius: 6px;
  .but {
    margin-left: 30px;
    width: 100px;
    border-radius: 40px;
    background: #00be76;
  }
  .el-table {
    font-size: 12px;
    color: #332929;
  }
}
</style>
